(document.addEventListener('DOMContentLoaded', function() {
    var banner = document.querySelector('.Banner ul');
    var liWidth = 1519.2; // 每个li的宽度，与图片宽度一致
    var totalLi = banner.children.length; // 总共的li数量
    var currentIndex = 0; // 当前显示的li的索引
    var slideInterval; // 定时器

    // 计算ul的总宽度
    banner.style.width = liWidth * totalLi + 'px';

    // 轮播函数
    function startSlide() {
        currentIndex = (currentIndex + 1) % totalLi;
        banner.style.transition = 'left 0.5s ease-in-out'; // 添加过渡效果
        banner.style.left = -currentIndex * liWidth + 'px'; // 更新ul的left值

        // 可以在这里添加逻辑来更新箭头的显示状态（如果需要的话）
    }

    // 设置自动轮播
    slideInterval = setInterval(startSlide, 3000); // 每3秒轮播一次

    // 添加箭头点击事件
    var prevNav = document.querySelector('.slide_nav');
    var nextNav = document.querySelector('.slide_nav.next');

    // 由于你的CSS隐藏了文字，我们可以直接使用这两个元素而不需要检查文字内容
    prevNav.addEventListener('click', function(e) {
        e.preventDefault();
        clearInterval(slideInterval); // 停止自动轮播
        currentIndex = (currentIndex - 1 + totalLi) % totalLi; // 计算上一个索引
        banner.style.transition = 'left 0.5s ease-in-out';
        banner.style.left = -currentIndex * liWidth + 'px';
        slideInterval = setInterval(startSlide, 3000); // 重新开始自动轮播
    });

    nextNav.addEventListener('click', function(e) {
        e.preventDefault();
        clearInterval(slideInterval); // 停止自动轮播
        startSlide(); // 直接调用轮播函数，因为它已经包含了更新索引和left值的逻辑
        slideInterval = setInterval(startSlide, 3000); // 重新开始自动轮播
    });

    // 初始化轮播图的位置
    banner.style.left = '0px'; // 实际上在CSS中已经设置了，这里只是为了确保
}))();